<template>
  <view class="couponDialog">
    <view class="couponInfo" :style="{background: `url(${backgroundCoupon}) 0 0 no-repeat`, backgroundSize: 'cover', backgroundPosition: 'center 40%'}">
      <view class="coupon-detail">
        <view class="coupon-price">
          ￥<span class="price">5</span>
        </view>
        <view class="coupon-time">
          <view class="ticket">
            新人优惠券
          </view>
          <view class="time">
            2023年12月24日 12:00到期
          </view>
        </view>
      </view>
      <view class="coupon-check">
        <text>领取后可在【我的—优惠券】中查看</text>
      </view>
      <view class="coupon-btn">
        <van-button @click="getCoupon" color="linear-gradient(#FF6C6F, #FD2F32)" type="info">立即领取</van-button>
      </view>
      <view class="coupon-close">
        <image @click="closeCouponDialog" src="@/static/images/close.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
  import { backgroundCoupon } from '@/utils/base64.js'
  export default {
    data() {
      return {
        backgroundCoupon
      }
    },
    prop: {
      showCouponDialog: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      getCoupon() {
        this.$emit('getCoupon')
        this.closeCouponDialog()
      },
      closeCouponDialog() {
        this.$emit('closeCouponDialog')
      }
    }
  }
</script>

<style lang="less" scoped>
  .couponDialog {
    width: 100%;
    height: 100%;
    z-index: 9999999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);

    .couponInfo {
      position: relative;
      width: 282px;
      height: 326px;
      margin-top: -70px;
    }

    .coupon-detail {
      position: absolute;
      bottom: 22%;
      left: 38px;
      right: 42px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .coupon-price {
        color: #DC2A18;

        .price {
          font-family: 'PingFang-SC-Bold', sans-serif;
          font-size: 40px;
          font-weight: 700;
        }
      }

      .coupon-time {
        .ticket {
          color: #5E4538;
          font-size: 15px;
          margin-bottom: 6px;
        }

        .time {
          font-family: 'PingFang-SC-Regular', sans-serif;
          color: #9A9089;
          font-size: 10px;
        }
      }
    }

    .coupon-check {
      font-family: 'PingFang-SC-Regular', sans-serif;
      position: absolute;
      bottom: 64px;
      left: 43px;
      font-size: 12px;
      color: #FFFFFF;
    }

    .coupon-btn {
      position: absolute;
      bottom: 16px;
      padding: 0 20px;
      left: 0;
      right: 0;

      ::v-deep .van-button {
        width: 100%;
        height: 37px;
        border-radius: 20px;
      }
    }

    .coupon-close {
      position: absolute;
      bottom: -60px;
      left: 0;
      display: flex;
      justify-content: center;
      right: 0;

      image {
        width: 28px;
        height: 28px;
        object-fit: contain;
      }
    }
    .unfinishOrder {
      ::v-deep .van-button--primary {
        flex: 1;
        border-radius: 10px;
        font-size: 15px;
      }
    
      .van-button--normal {
        border-radius: 10px;
        font-size: 15px;
      }
    
      ::v-deep .van-button {
        width: 100%;
      }
    }
  }
</style>
